<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小儿推拿</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/home.css">
    <link rel="stylesheet" href="../css/fontClass/iconfont.css">
    <link rel="stylesheet" href="../css/datatimepicker/jquery.datetimepicker.css">
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="Baby_Healthy_home">
    <div class="Baby_Healthy_home_left">
        <div class="Baby_Healthy_home_left_logo">
            <img class="Baby_Healthy_home_left_img" src="../images/1.jpg"/>
            <div class="Baby_Healthy_home_left_name">
                <p class="Baby_Healthy_home_left_name_tit">小儿推拿</p>
                <p class="Baby_Healthy_home_left_name_tip">顺义店</p>
            </div>
        </div>
        <ul class="Baby_Healthy_home_left_sideBar">
            <li class="Baby_Healthy_home_left_sideBar_li"><a class="color_direct" href="home/home.html"><i class="icon iconfont icon-icon-test14"></i>工作台</a></li>
            <li class="Baby_Healthy_home_left_sideBar_li"><a class="color_direct" href="bespeak.html"><i class="icon iconfont icon-icon-test16"></i>预约管理</a></li>
            <li class="Baby_Healthy_home_left_sideBar_li"><a class="color_direct" href="orderManagement.html"><i class="icon iconfont icon-icon-test4"></i>订单管理</a></li>
            <li class="Baby_Healthy_home_left_sideBar_li"><a class="color_direct" href="userlib.html"><i class="icon iconfont icon-icon-test5"></i>病人库</a></li>
            <li class="Baby_Healthy_home_left_sideBar_li"><a class="color_direct" href="vip.html"><i class="icon iconfont icon-icon-test3"></i>会员中心</a></li>
            <li class="Baby_Healthy_home_left_sideBar_li"><a class="color_direct" href="../cardManagement/homePage.html"><i class="icon iconfont icon-icon-test6"></i>卡券管理</a></li>
            <li class="Baby_Healthy_home_left_sideBar_li"><a class="color_direct" href="../storeSetting.html"><i class="icon iconfont icon-icon-test6"></i>门店设置</a></li>
            <li class="Baby_Healthy_home_left_sideBar_li"><a class="color_direct" href="../staffManagement/staffManagement_hp.html"><i class="icon iconfont icon-icon-test10"></i>员工管理</a></li>
            <li class="Baby_Healthy_home_left_sideBar_li"><a class="color_direct" href="../basicSetting.html"><i class="icon iconfont icon-icon-test15"></i>基础设置</a></li>
        </ul>
    </div>
    <!--右侧-->
    <div class="Baby_Healthy_home_right">
        <div class="Baby_Healthy_home_right_top">
            <ul class="Baby_Healthy_home_right_top_list">
                <li class="num1  bespeak_active">预约列表</li>
                <li class="num2">预约看板</li>
            </ul>
        </div>
        <!--预约列表-->
        <div class="Baby_Healthy_home_right_bespeak_list">
            <div class="Baby_Healthy_home_right_bespeak_search">
                <button class="Baby_Healthy_home_right_bespeak_btn">添加预约</button>
                <div class="Baby_Healthy_home_right_bespeak_btn_searchbox">
                    <input class="bespeak_search_input" type="text" placeholder="会员名或手机号">
                    <button class="bespeak_search_button">搜索</button>
                </div>
            </div>
            <div class="bespeak_search_container">
                <div class="bespeak_search_container_seive">
                    <lable>时间筛选：
                        <input id="datetimepicker" type="text"  class="picker_style" placeholder="请选择日期">
                        <span>&nbsp;至&nbsp;</span>
                        <input id="datetimepicker" type="text" class="picker_style"  placeholder="请选择日期">
                    </lable>
                    <lable class="bespeak_search_choice">选择门店：</lable>
                    <select  type="text" class="picker_style" placeholder="请选择门店">
                        <option class="picker_style" value="">国医堂顺义店</option>
                    </select>
                </div>
                <ul class="bespeak_change_list">
                    <li class="bespeak_change_list_actve active_bgc">待服务</li>
                    <li class="bespeak_change_list_actve">待付款</li>
                    <li class="bespeak_change_list_actve">已超时</li>
                    <li class="bespeak_change_list_actve">已取消</li>
                </ul>
                <table class="bespeak_change_table">
                    <thead>
                        <tr class="bespeak_change_title">
                            <th class="bespeak_change_one">预约人</th>
                            <th>预约门店</th>
                            <th>预约技师</th>
                            <th>预约状态</th>
                            <th>提交时间</th>
                            <th>预约到店时间</th>
                            <th class="bespeak_table_equic" style="width: 0px;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="bespeak_change_one">
                                <img class="bespeak_change_img" src="../images/1.jpg">
                                <div class="bespeak_change_name">
                                    <span>张三</span>
                                    <span>18919266045</span>
                                    <span>持卡数：1</span>
                                </div>
                            </td>
                            <td class="table_fontSize">国医堂顺义店</td>
                            <td class="table_fontSize">技师0号</td>
                            <td class="table_fontSize">初诊</td>
                            <td class="table_fontSize">2018-04-01 14:20:20</td>
                            <td class="bespeak_change_time1">
                                <span>14:20</span>
                                <span class="bespeak_change_time1_color">02-10</span>
                                <span class="bespeak_change_time1_color">剩余1天23小时15分钟</span>
                            </td>
                            <td class="bespeak_table_equic" style="width: 0px;">
                                <button class="button_stsue_cancle">取消</button>
                                <button class="button_stsue_change">更改</button>
                                <button class="button_stsue_accept">接诊</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table class="bespeak_change_table hidden">
                    <thead>
                    <tr class="bespeak_change_title">
                        <th class="bespeak_change_one">预约人</th>
                        <th class="bespeak_change_two">预约门店</th>
                        <th class="bespeak_change_people">预约技师</th>
                        <th class="bespeak_change_statue">预约状态</th>
                        <th class="bespeak_change_time">提交时间</th>
                        <th class="bespeak_change_time1">预约到店时间</th>
                        <th class="bespeak_table_equic">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="bespeak_change_one">
                            <img class="bespeak_change_img" src="../images/1.jpg">
                            <div class="bespeak_change_name">
                                <span>张三</span>
                                <span>18919266045</span>
                                <span>持卡数：1</span>
                            </div>
                        </td>
                        <td class="bespeak_change_two">国医堂顺义店</td>
                        <td class="bespeak_change_people">技师1号</td>
                        <td class="bespeak_change_statue">初诊</td>
                        <td class="bespeak_change_time">2018-04-01 14:20:20</td>
                        <td class="bespeak_change_time1">
                            <span>14:20</span>
                            <span class="bespeak_change_time1_color">02-10</span>
                            <span class="bespeak_change_time1_color">剩余1天23小时15分钟</span>
                        </td>
                        <td class="bespeak_table_equic">
                            <button class="button_stsue_cancle">取消</button>
                            <button class="button_stsue_accept">接诊</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <table class="bespeak_change_table hidden">
                    <thead>
                    <tr class="bespeak_change_title">
                        <th class="bespeak_change_one">预约人</th>
                        <th class="bespeak_change_two">预约门店</th>
                        <th class="bespeak_change_people">预约技师</th>
                        <th class="bespeak_change_statue">预约状态</th>
                        <th class="bespeak_change_time">提交时间</th>
                        <th class="bespeak_change_time1">预约到店时间</th>
                        <th class="bespeak_table_equic">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="bespeak_change_one">
                            <img class="bespeak_change_img" src="../images/1.jpg">
                            <div class="bespeak_change_name">
                                <span>张三</span>
                                <span>18919266045</span>
                                <span>持卡数：1</span>
                            </div>
                        </td>
                        <td class="bespeak_change_two">国医堂顺义店</td>
                        <td class="bespeak_change_people">技师1号</td>
                        <td class="bespeak_change_statue">初诊</td>
                        <td class="bespeak_change_time">2018-04-01 14:20:20</td>
                        <td class="bespeak_change_time1">
                            <span>14:20</span>
                            <span class="bespeak_change_time1_color">02-10</span>
                            <span class="bespeak_change_time1_color red_color">剩余1天23小时15分钟</span>
                        </td>
                        <td class="bespeak_table_equic">
                            <button class="button_stsue_cancle">取消</button>
                            <button class="button_stsue_change">更改</button>
                            <button class="button_stsue_accept">接诊</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--预约看板-->
        <div class="Baby_Healthy_home_right_bespeak">
            <div class="bespeak_change_look_list">
                <div class="bespeak_change_look_list_ul">
                    <li class="bespeak_change_look_li">今天</li>
                    <li class="bespeak_change_look_li">明天</li>
                    <li class="bespeak_change_look_li">后天</li>
                    <li class="bespeak_change_look_li_input"><input type="text" class="bespeak_change_look_input" placeholder="选择日期"></li>
                </div>
                <ul class="bespeak_change_look_list_tip">
                    <li><span class="tip_have"></span>已预约</li>
                    <li><span class="tip_has"></span>已开单</li>
                    <li><span class="tip_empty"></span>空闲</li>
                    <li><span class="tip_had"></span>已开单</li>
                </ul>
            </div>
            <table class="bespeak_change_look">
                <thead>
                <tr>
                    <th class="">医师</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                    <th class="">10:00</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="">医师01号</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class=""><span class="td_empty"></span></td>
                    <td class="red_color">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="red_color">王六六</td>
                    <td class="">王六六</td>
                </tr>
                <tr>
                    <td class="">医师01号</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="red_color">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="">王六六</td>
                    <td class="red_color">王六六</td>
                    <td class="">王六六</td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>
</div>
<!--添加预约-->
<div class="addBespeak hidden">
    <div class="addBespeak_box">
        <p class="addBespeak_tit">
            新增预约<span class="addBespeak_tit_close">×</span>
        </p>
        <div class="couponContent">
            <form name="form" class="couponWrapper couponMargin">
                <div class="couponOption">
                    <label class="formTipText formTipTextWidth">*&nbsp;手机号：</label>
                    <input class="couponInput couponName" type="text" placeholder="请输入手机号">
                    <label class="formTipText formTipTextWidth">*&nbsp;备用联系人：</label>
                    <input class="couponInput couponName" type="text" placeholder="请输入手机号">
                </div>
                <div class="couponOption">
                    <label class="formTipText formTipTextWidth">*&nbsp;预约人：</label>
                    <input class="couponInput couponNum formTipWidth" type="text" placeholder="请输入预约人姓名">
                </div>
                <div class="couponOption">
                    <label class="formTipText formTipTextWidth">*&nbsp;预约到店时间：</label>
                    <input class="couponInput couponCount" type="text" >
                    <select name="" id="" class="couponInput couponShop">
                        <option value="全部门店"></option>
                        <option value="请选择">请选择</option>
                    </select>
                </div>
                <div class="couponOption">
                    <label class="formTipText formTipTextWidth">*&nbsp;内容：</label>
                    <button class="right_bespeak_btn_card">添加内容</button>
                </div>
                <div class="couponOption">
                    <label class="formTipText formTipTextWidth" style="vertical-align: top">使用说明：</label>
                    <textarea class="couponDesc formTipMaxWidth" placeholder="请输入使用说明"></textarea>
                </div>
            </form>
            <div class="submitBtns submitBtnsBgc">
                <button class="sureBtn">提交</button>
                <button class="putawayBtn">上架</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/common.js"></script>
<script src="../js/datatimepicker/jquery.datetimepicker.min.js"></script>
<script>
    $(function(){
        $('#datetimepicker').datetimepicker({
            lang:"ch", //语言选择中文 注：旧版本 新版方法：$.datetimepicker.setLocale('ch');
            format:"Y-m-d",      //格式化日期
            timepicker:false,    //关闭时间选项
            yearStart:2000,     //设置最小年份
            yearEnd:2050,        //设置最大年份
            todayButton:false    //关闭选择今天按钮
    });

        $('.Baby_Healthy_home_right_top_list>li').on('click',function(){
            $(this).addClass('bespeak_active').siblings().removeClass('bespeak_active');
        });
        $('.num1').on('click',function(){
            $('.Baby_Healthy_home_right_bespeak_list').show();
            $('.Baby_Healthy_home_right_bespeak').hide();
        });
        $('.num2').on('click',function(){
            $('.Baby_Healthy_home_right_bespeak_list').hide();
            $('.Baby_Healthy_home_right_bespeak').show();
        })
//        table切换
        $('.bespeak_change_list_actve').on('click',function(){
            var thisIndex = $(this).index();
            $(this).addClass("active_bgc").siblings().removeClass("active_bgc");
            $('.bespeak_change_table').eq(thisIndex).show().siblings(".bespeak_change_table").hide();
        })
        $('.Baby_Healthy_home_right_bespeak_btn').on('click',function(){
            $('.addBespeak').removeClass('hidden');
        });
//        关闭弹窗
        $('.addBespeak_tit_close').on('click',function(){
            $(this).parents('.addBespeak').remove();
        });
    });
</script>
</html>